import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
  SelectSeparator
} from '../../components/ui/select';

const meta: Meta<typeof Select> = {
  title: 'UI/Select',
  component: Select,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof Select>;

export const Default: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="请选择" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="option1">选项一</SelectItem>
          <SelectItem value="option2">选项二</SelectItem>
          <SelectItem value="option3">选项三</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  ),
};

export const WithLabel: Story = {
  render: () => (
    <div className="grid w-full max-w-sm items-center gap-1.5">
      <label htmlFor="framework" className="text-sm font-medium">框架</label>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="请选择框架" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="react">React</SelectItem>
            <SelectItem value="vue">Vue</SelectItem>
            <SelectItem value="angular">Angular</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  ),
};

export const WithGroups: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="请选择城市" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>华北地区</SelectLabel>
          <SelectItem value="beijing">北京</SelectItem>
          <SelectItem value="tianjin">天津</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>华东地区</SelectLabel>
          <SelectItem value="shanghai">上海</SelectItem>
          <SelectItem value="hangzhou">杭州</SelectItem>
          <SelectItem value="nanjing">南京</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>华南地区</SelectLabel>
          <SelectItem value="guangzhou">广州</SelectItem>
          <SelectItem value="shenzhen">深圳</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  ),
};

export const Disabled: Story = {
  render: () => (
    <Select disabled>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="禁用状态" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="option1">选项一</SelectItem>
          <SelectItem value="option2">选项二</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  ),
};

export const DisabledOptions: Story = {
  render: () => (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="请选择" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="option1">选项一</SelectItem>
          <SelectItem value="option2" disabled>选项二 (禁用)</SelectItem>
          <SelectItem value="option3">选项三</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  ),
};
